<template>
  <div class="page-content">
    <BaseTable
      v-bind="contentTableConfig"
      :list-data="dataList"
      @pageSizeChange="queryTblMain"
      v-on="$listeners"
    >
      <template v-for="item in otherPropSlots" #[item.slotName]="scope">
        <slot :name="item.slotName" :row="scope.row" />
      </template>
    </BaseTable>
  </div>
</template>

<script>
import BaseTable from "@/base-ui/table";
import request from "@/utils/request";
export default {
  components: {
    BaseTable,
  },
  props: {
    contentTableConfig: {
      type: Object,
      default: () => ({}),
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      dataList: [],
    };
  },
  computed: {
    otherPropSlots() {
      return this.contentTableConfig?.propList;
    },
  },
  methods: {
    queryTblMain(keepPage) {
      if ("dataList" in this.contentTableConfig) {
        this.$nextTick(() => {
          this.dataList = this.contentTableConfig.dataList;
        });
        return;
      }
      const { pageInfo, pageUrl, customRequestFn } = this.contentTableConfig;
      if (!keepPage) {
        pageInfo.currentPage = 1;
        pageInfo.pageSize = 10;
      }
      const params = {
        pageNum: pageInfo.currentPage,
        pageSize: pageInfo.pageSize,
        ...this.formData,
      };
      for (const [key, val] of Object.entries(params)) {
        if (["", null, undefined].includes(val)) delete params[key];
      }
      pageInfo.loading = true;
      let req;
      if (customRequestFn) {
        req = customRequestFn(params);
      } else {
        req = request({
          url: pageUrl,
          method: "get",
          params,
        });
      }
      req
        .then((res) => {
          pageInfo.loading = false;
          const { data } = res;
          this.dataList = [];

          const dataKey = pageInfo?.dataKey || "records";
          this.$nextTick(() => {
            this.dataList =
              data[dataKey] || data.userList || data.earningsInfoList || data;
          });
          pageInfo.total = data.total;
          if (!pageInfo.total) {
            this.showFooter = false;
          }
        })
        .catch(() => {
          pageInfo.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
</style>
